<template>
  <div class="movie-table-wrapper">
    <el-table :data="data" border style="width: 100%" align="center">
      <el-table-column fixed prop="title" label="影片名称" width="200"></el-table-column>
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="cover" label="封面">
        <template slot-scope="scope">
          <div class="image">
            <el-image :src="scope.row.cover" style="height: 100%" lazy>
              <div slot="placeholder" class="image-slot">
                <i class="el-icon-loading" />
              </div>
            </el-image>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="origin_title" label="影片原名" width="200"></el-table-column>
      <el-table-column prop="pub_year" label="上映年份" width="100"></el-table-column>
      <el-table-column prop="douban_rating" label="豆瓣评分" width="100">
        <template slot-scope="scope">
          <span>{{ Number(scope.row.douban_rating).toFixed(1) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="douban_id" label="豆瓣ID" width="100"></el-table-column>
      <el-table-column prop="imdb_id" label="IMDbID" width="120"></el-table-column>
      <el-table-column prop="imdb_rating" label="IMDb评分" width="100">
        <template slot-scope="scope">
          <span>{{ Number(scope.row.imdb_rating).toFixed(1) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="duration" label="影片时长" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.duration }}分钟</span>
        </template>
      </el-table-column>
      <el-table-column prop="review" label="影评" width="100">
        <template slot-scope="scope">
          <el-button
            @click="handleReviewQuery(scope.row.id)"
            type="text"
            size="medium"
            >查看影评</el-button>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button
            @click="handleMovieDelete(scope.row.id, scope.row.title)"
            type="text"
            size="medium"
          >删除</el-button>
          <el-button @click="handleMovieUpdate(scope.row.id)" type="text" size="medium">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "MovieTable",
  props: {
    data: {
      type: Array,
      default: []
    }
  },
  data() {
    return {};
  },
  methods: {
    handleMovieDelete(id, title) {
      this.$emit("delete", { id, title });
    },
    handleMovieUpdate(id) {
      this.$emit("update", id);
    },
    handleReviewQuery(id) {
      this.$emit('review-query', id)
    }
  }
};
</script>

<style lang="scss" scoped>
.movie-table-wrapper {
  .image {
    height: 80px;
    background-color: #eee;
    &::v-deep .el-image {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>